<template>
	<view class="page" style="padding-top: 104rpx;">
		<view class="header">
			<image @click="back" class="back" src="../../static/tian/back.png" mode=""></image>
			<view class="text">{{$t('first.title1')}}</view>
			<view class="fright">
				<img v-if="$i18n.locale == 'ft'" src="../../static/img/zh.png" alt="" @click="open2">
				<img v-if="$i18n.locale == 'en'" src="../../static/img/en.png" alt="" @click="open2">
				<img v-if="$i18n.locale == 'jp'" src="../../static/img/rb.png" alt="" @click="open2">
				<img v-if="$i18n.locale == 'ko'" src="../../static/img/hg.png" alt="" @click="open2">
			</view>
		</view>
		<view class="mask2" v-if="show2">
			<view @click="lang('en')">
				<img src="../../static/img/en.png" alt="">
				<text>English</text>
			</view>
			<view @click="lang('ft')">
				<img src="../../static/img/zh.png" alt="">
				<text>港澳繁體</text>
			</view>
			<view @click="lang('jp')">
				<img src="../../static/img/rb.png" alt="">
				<text>にほんご</text>
			</view>
			<view @click="lang('ko')">
				<img src="../../static/img/hg.png" alt="">
				<text>한국어</text>
			</view>
		</view>
		<view class="contop">
			<image class="icon" src="../../static/tian/logincon.png" mode=""></image>
		</view>
		<view class="con">
			<view class="title">{{$t('first.title2')}}</view>
			<view class="inputbox">
				<view class="label">{{$t('first.title3')}}</view>
				<input type="text" v-model="mobile" :placeholder="$t('first.title4')" autocomplete="off">
			</view>
			<view class="inputbox">
				<view class="label">{{$t('first.title5')}}</view>
				<input class="input" v-model="password" :type="type" :placeholder="$t('first.title6')" autocomplete="off">
				<image v-if="showpsd" @click="changeshowpsd(true)" class="icon" src="../../static/tian/eye1.png" mode=""></image>
				<image v-else @click="changeshowpsd(false)" class="icon" src="../../static/tian/eye.png" mode=""></image>
			</view>
			<view class="title1" @click="forgotpsd">{{$t('first.title7')}}?</view>
			<view  @click="toLogin()" class="btn">{{$t('first.title1')}}</view>
			<!-- <view  @click="toLogout()" class="btn">{{$t('first.title1')}}</view> -->
			<view class="title2"  @click="register">{{$t('first.title8')}}? <text style="color: #ffb105;">{{$t('first.title9')}}</text></view>
		</view>
		
		<u-popup :show="show4" :mode="'center'">
			<view class="popupcon1">
				<view class="mask_title">{{$t('wallet.shengji')}}</view>
				<view class="mask_title">{{$t('wallet.shengji2')}}</view>
				<view class="mask_btn">
					<view @click='show4 = false'>{{$t('wallet.shengji3')}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {domain} from '../../config/domain.js'
	export default{
		data(){
			return{
				password:'',
				mobile:'',
				showpsd:false,
				type:'password',
				show2:false
			}
		},
		methods:{
			open2() {
				this.show2 = !this.show2
			},
			lang(e){
				this.$i18n.locale = e;
				localStorage.setItem('lang',e);
				this.show2 = false;
			},
			changeshowpsd(e){
				if(e){
					this.showpsd = false;
					this.type = 'password'
				}else{
					this.showpsd = true;
					this.type = 'text'
				}
			},
			forgotpsd(){
				uni.navigateTo({
					url:'./forgotpsd'
				})
			},
			register(){
				uni.navigateTo({
					url:'./register'
				})
			},
			back(){
				uni.navigateBack()
			},
			toLogin() {
			
				
				var url=domain + 'api/new_login';
				var mytype='POST';
				
				if (!this.mobile) {	
					uni.showToast({
						icon:'none',
						title:this.$t('first.title3')
					}); 
					return false;
				}
				if (!this.password) {
					uni.showToast({
						icon:'none',
						title:this.$t('first.title18')
					}); 
					return false;
				}
				var data={
					mobile:this.mobile,
					password:this.password,
				
				};
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				uni.request({
					url,
					method: mytype,
					data,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang')
					},
					success: res => {
						if(res.data.code==0){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							}); 
						}else{
						    uni.setStorageSync('token',res.data.data.token);
							uni.setStorageSync('userinfo',res.data.data);
							 if(res.data.data.key){
								 uni.navigateTo({
								 	url:'/pages/login/backups?ci='+res.data.data.key
								 })
							 }else{
								 uni.navigateTo({
								 	url:'/pages/index/index'
								 })
							 }
							
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			toLogout() {
			
				
				var url=domain + 'api/new_logout';
				var mytype='POST';
				
		var userinfo=	uni.getStorageSync('userinfo');
			
			
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				uni.request({
					url,
					method: mytype,
				
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':userinfo.token,
					},
					success: res => {
						uni.showToast({
							icon:'none',
							title:res.data.msg
						}); 
			
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.page{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #ecf0f5;
	}
	.header{
		width: 100%;
		height: 104rpx;
		padding: 20rpx;
		position: fixed;
		background-color: #ecf0f5;
		display: flex;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}
	.back{
		width: 48rpx;
		height: 48rpx;
	}
	.header .text{
		font-size: 36rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 600;
		color: #222;
	}
	.contop{
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(../../static/tian/loginbg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 518rpx;
		width: 100%;
	}
	.contop .icon{
		width: 356rpx;
		height: 356rpx;
	}
	.con{
		width: 100%;
		padding: 60rpx;
	}
	.con .title{
		font-size: 64rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #222;
		line-height: 90rpx;
		letter-spacing: 2rpx;
		margin-bottom: 80rpx;
	}
	.inputbox{
		width: 100%;
		height: 112rpx;
		border-radius: 30rpx;
		border: 2rpx solid #b0b0c2;
		padding: 10rpx 48rpx;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 60rpx;
	}
	.label{
		position: absolute;
		top: -16rpx;
		padding: 0 20rpx;
		background: #ecf0f5;
		font-size: .32rem;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 400;
		height: 32rpx;
		color: #8c8c8c;
	}
	input,.input{
		width: 100%;
		height: 96rpx;
		border: 2rpx solid transparent;
		font-size: 28rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 400;
		color: #000;
		background-color: transparent;
		outline: none;
	}
	.inputbox .icon{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 30rpx;
		top: 20%;
	}
	.title1{
		font-size: 28rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 600;
		color: #ffb105;
		text-align: right;
		margin-bottom: 40rpx;
	}
	.btn{
		width: 100%;
		height: 112rpx;
		background: #ffb105;
		border-radius: 30rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #000;
		text-align: center;
		line-height: 112rpx;
		margin-bottom: 44rpx;
	}
	.title2{
		font-size: 28rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 600;
		color: #040415;
		text-align: center;
	}
	
	.fright img {
		width: 44rpx;
		height: 44rpx;
	}
	.mask2 {
		position: fixed;
		top: 105rpx;
		right: 14rpx;
		z-index: 99;
		background-color: #ffffff;
		border-radius: 50rpx;
		padding: 10rpx 30rpx;
		font-size: 24rpx;
	}
	
	.mask2 img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 30rpx;
	}
	
	
	.mask2 view {
		display: flex;
		align-items: center;
		margin: 20rpx;
	}
</style>